diff --git a/landing/investor-profile-modal.css b/landing/investor-profile-modal.css new file mode 100644 index 000000000..58f857284 --- /dev/null +++ b/landing/investor-profile-modal.css @@ -0,0 +1,4 @@ +div.modalContainer { + background-color: #11161d; + border-radius: 20px; +} diff --git a/landing/investor-profile-modal.react.js b/landing/investor-profile-modal.react.js new file mode 100644 index 000000000..d19af8c7c --- /dev/null +++ b/landing/investor-profile-modal.react.js @@ -0,0 +1,20 @@ +// @flow + +import * as React from 'react'; + +import ModalOverlay from 'lib/components/modal-overlay.react'; +import { useModalContext } from 'lib/components/modal-provider.react'; + +import css from './investor-profile-modal.css'; + +function InvestorProfileModal(): React.Node { + const { popModal } = useModalContext(); + + return ( + +
+ + ); +} + +export default InvestorProfileModal; diff --git a/landing/investor-profile.css b/landing/investor-profile.css index bd8536c9b..36197de49 100644 --- a/landing/investor-profile.css +++ b/landing/investor-profile.css @@ -1,56 +1,76 @@ .profile { display: flex; flex-direction: row; width: 576px; border-radius: 20px; padding: 40px 32px; background-color: #7e57c221; box-shadow: 0px 4px 4px #00000040, inset 0px 0px 12px 5px #7e57c24d; + cursor: pointer; } .profile img { border-radius: 72px; max-width: 144px; max-height: 144px; filter: saturate(0); align-self: center; } div.investorInfoContainer { margin-left: 32px; display: flex; flex-direction: column; } p.name { font-size: 24px; font-weight: 500; margin-bottom: 12px; } p.description { font-size: 18px; margin-bottom: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 56px; } p.involvement { font-weight: 500; font-size: 14px; } +a.profileModal { + background-color: #7e57c266; + cursor: default; + min-width: 576px; + width: max-content; + max-width: min(692px, 90vw); +} + +p.descriptionModal { + display: block; + min-height: 56px; + height: auto; +} + @media (max-width: 600px) { .profile { flex-direction: column; - margin: 0 16px; + max-width: 464px; + } + + a.profileModal { + min-width: 90vw; + width: 90vw; } div.investorInfoContainer { margin: 16px 0 0; } } diff --git a/landing/investor-profile.react.js b/landing/investor-profile.react.js index 14fae8f1a..4b0709b08 100644 --- a/landing/investor-profile.react.js +++ b/landing/investor-profile.react.js @@ -1,30 +1,57 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import css from './investor-profile.css'; type Props = { +name: string, +description: string, +involvement: ?string, +imageURL: string, +onClick: () => void, + +isModalContent?: boolean, }; function InvestorProfile(props: Props): React.Node { - const { name, description, involvement, imageURL, onClick } = props; + const { + name, + description, + involvement, + imageURL, + onClick, + isModalContent, + } = props; + + const profileContainerClassName = React.useMemo( + () => + classNames({ + [css.profile]: true, + [css.profileModal]: isModalContent, + }), + [isModalContent], + ); + + const descriptionClassName = React.useMemo( + () => + classNames({ + [css.description]: true, + [css.descriptionModal]: isModalContent, + }), + [isModalContent], + ); return ( - + {`image

{name}

-

{description}

+

{description}

{involvement}

); } export default InvestorProfile;